<div class="containerStyle">
  <h3>描述</h3>
  <p>表格详情/列隐藏显示 + 详情展开</p>
  <h3>示例</h3>
  <ti-table [(displayedData)]="displayed" [srcData]="srcData" [columns]="columns">
    <div style="height: 28px; margin-bottom: 10px">
      <ti-cols-toggle style="float: right" [panelWidth]="panelWidth"> </ti-cols-toggle>
    </div>
    <table>
      <thead>
        <tr>
          <!--使用展开详情图标时，需要给展开详情图标列加 details-icon-column 属性-->
          <th details-icon-column></th>
          <th tiOverflow *ngIf="columns[1].show" width="{{columns[1].width}}">{{columns[1].title}}</th>
          <th tiOverflow *ngIf="columns[2].show" width="{{columns[2].width}}">{{columns[2].title}}</th>
          <th tiOverflow *ngIf="columns[3].show" width="{{columns[3].width}}">{{columns[3].title}}</th>
          <th tiOverflow width="{{columns[4].width}}">{{columns[4].title}}</th>
          <th tiOverflow *ngIf="columns[5].show" width="{{columns[5].width}}">{{columns[5].title}}</th>
        </tr>
      </thead>
      <tbody>
        <!--注意:ngFor中的displayed数据与displayedData传入的数据一致, 初始化设置为[]即可-->
        <ng-container *ngFor="let row of displayed;index as i">
          <tr>
            <!--使用展开详情图标时，需要给展开详情图标列加 details-icon-column 属性-->
            <td details-icon-column>
              <ti-details-icon [row]="row" [index]="i"> </ti-details-icon>
              <!--详情图标设置，传入行数据-->
            </td>
            <td tiOverflow *ngIf="columns[1].show">{{row.firstName}}</td>
            <td tiOverflow *ngIf="columns[2].show">{{row.lastName}}</td>
            <td tiOverflow *ngIf="columns[3].show">{{row.age}}</td>
            <td tiOverflow>{{row.balance | currency}}</td>
            <td tiOverflow *ngIf="columns[5].show">{{row.email}}</td>
          </tr>
          <tr *tiDetailsTr="row">
            <!--详情内容行tiDetailsTr，传入行数据-->
            <!-- tiColspan是为了使得该td（详情内容）占据表格整个宽度(列合并)，tiColspan列合并的值为columns接口传入的对象数组中
                            中show属性值不为false的对象的个数。本例中，作用相当于colspan='5' -->
            <td tiColspan>
              <div class="ti3-table-detail-container">
                <div>详情展示：{{row.firstName}}</div>
                <div>详情展示：{{row.balance}}</div>
                <div>详情展示：{{row.lastName}}</div>
              </div>
            </td>
          </tr>
        </ng-container>
      </tbody>
    </table>
  </ti-table>
</div>
